<template>
  <p v-for="item in data" :key="item.id" @click="jump(item.id)">
    <img :src="item.img" alt="">
    <span>{{ item.title }}</span>
  </p>
</template>

<script setup>
import {  } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
defineProps(["data"]);
const jump = (id) => {
  console.log(id);
  if (id === 1) {
    router.push("/main/PresonalPage");
  } else if (id === 2) {
    router.push("/main/Community");
  } else if (id === 3) {
    router.push("/main/Setting");
  }else if (id === 4) {
    router.push("/Enert");
  }
};
</script>
<style scoped lang="scss">
p {
  height: 28px;
  background-color: rgb(12, 203, 129);
  color: #fff;
  display: flex;
  align-items: center;
  justify-items: center;
  padding: 16px 13px 16px 13px;
  margin-left: 15px;
  cursor: pointer;
  img{
    width: 14px;
    height: 14px;
    object-fit: cover;
  }
  span{
    // width: 100px;
    height: 21px;
    margin-left: 5px;
    font-size: 14px;
    // background: red;
  }
}
</style>
